<!-- 库房选择弹窗 -->
<template>
  <el-dialog v-model="dialogVisible" title="库房选择" width="1000px" draggable align-center>
    <div class="main-box">
      <div class="table-box">
        <!-- <SelectFilter :data="selectFilterData" /> -->
        <ProTable
          ref="proTable"
          title="库房列表"
          highlight-current-row
          :columns="columns"
          :request-api="getWarehouseList"
          :init-param="Object.assign(initParams)"
          height="400px"
        >
          <!-- 表格操作 -->
          <template #operation="scope">
            <el-button type="primary" link :icon="Select" @click="selectWarehouse(scope.row)">选择</el-button>
          </template>
        </ProTable>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Select } from "@element-plus/icons-vue";
import { Warehouse } from "@/api/interface";
import { getWarehouseList } from "@/api/modules/warehouse";
import { warehouseLevel } from "@/utils/serviceDict";
//import SelectFilter from "@/components/SelectFilter/index.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "warehouseId", label: "库房id", width: 100, sortable: true, search: { el: "input" } },
  { prop: "warehouseName", label: "库房名称", width: 120, search: { el: "input" } },
  { prop: "warehouseLevel", label: "库房等级", search: { el: "input" }, enum: warehouseLevel, tag: true, sortable: true },
  { prop: "warehouseAddress.province", label: "省" },
  { prop: "warehouseAddress.city", label: "市" },
  { prop: "warehouseAddress.zone", label: "区" },
  { prop: "warehouseAddress.detail", label: "详细地址" },
  { prop: "operation", label: "操作", width: 150, fixed: "right" }
];

// // selectFilter 数据
// const selectFilterData = reactive([
//   {
//     title: "库房类型",
//     key: "warehouseLevel",
//     options: [
//       {
//         label: "全部",
//         value: -1
//       },
//       {
//         label: "中心库房",
//         value: 0,
//         icon: "MapLocation"
//       },
//       {
//         label: "分站库房",
//         value: 1,
//         icon: "Place"
//       }
//     ]
//   }
// ]);

onMounted(() => {});
const initParams = ref({ warehouseLevel: 0 });
const dialogVisible = ref(false);

// 接收父组件传过来的参数
const open = (warehouseLevel: number) => {
  console.log(warehouseLevel);
  dialogVisible.value = true;
  initParams.value.warehouseLevel = warehouseLevel;
  proTable.value?.getTableList();
};

// const handleSubmit = () => {};
const emit = defineEmits(["get-warehouse"]);
const selectWarehouse = async (row: Warehouse.WarehouseInfo) => {
  emit("get-warehouse", row);
  dialogVisible.value = false;
};

defineExpose({
  open
});
</script>
